import React from 'react'
import Swiper from "swiper"
// import "swiper.css"
import './detailSwiperCss.css'

class DetailBanner extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            swipterImg: [
                "https://images.vsigo.cn/Products/contacts/500-500/20206190245188.jpg",
                "https://images.vsigo.cn/Products/contacts/500-500/201762713461869234.jpg",
                "https://images.vsigo.cn/Products/contacts/500-500/2017627134628585.jpg",
                "https://images.vsigo.cn/Products/contacts/500-500/201762713463529056.jpg"
            ],
            index:"1"
        }
    }

    render() {
        return (
            <div className="swiper-container">
                <div className="swiper-wrapper" >
                    {
                        this.props.swipterImg &&
                        this.props.swipterImg.map((item, index) => {
                            return (
                                <div className="swiper-slide" key={index}>
                                    <img className="swiper-img" src={item} alt="" />
                                </div>
                            )
                        })
                    }

                </div>
            </div>
        )
    }
    componentDidMount = () => {
        
        new Swiper('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: true
            },
            speed: 500,
            observer: true,
            observeParents: true,
            autoplayDisableOnInteraction: false,
            // on:{
            //     // transitionStart: function(swiper){
            //     //  console.log(this.pagination)
            //     // }
            //     slideChangeTransitionStart: function(){
                    
            //         console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
            //       }
            //   }

        })

    }
}
export default DetailBanner;